<template>
  <Card title="简介" :padding="[32]" :show-divider="false">
    <view class="hb-mt-3">
      <view class="description" :class="{ 'text-overflow-3': !isExpanded }">
        <text class="hb-text-sm hb-text-[#646566]">{{ description }}</text>
      </view>
      <view
        v-if="hasMore"
        class="hb-mt-2 hb-flex hb-items-center hb-justify-center hb-gap-1 hb-text-primary"
        @click="toggleExpand"
      >
        <text class="hb-text-sm">{{ !isExpanded ? '展开更多' : '收起' }}</text>
        <tm-icon
          :name="!isExpanded ? 'ali-icon icon-xiala' : 'ali-icon icon-shangla'"
          :size="24"
          color="#2878FF"
        />
      </view>
    </view>
  </Card>
</template>

<script setup lang="ts">
  import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
  import Card from '../../components/Card/index.vue';

  interface IntroductionProps {
    description: string;
  }

  defineProps<IntroductionProps>();
  // 是否展开
  const isExpanded = ref(false);
  const hasMore = ref(false);
  const ins = getCurrentInstance();

  // 检查文本是否超过三行
  onMounted(() => {
    nextTick(() => {
      // 先让文本处于展开状态进行高度检测
      isExpanded.value = true;
      
      nextTick(() => {
        const query = uni.createSelectorQuery().in(ins?.proxy);
        query
          .select('.description')
          .boundingClientRect((rect: any) => {
            if (!rect) return;

            // 获取行高（转换rpx为px）
            const lineHeight = uni.upx2px(44);
            // 三行的高度
            const maxHeight = lineHeight * 3;
            // 如果实际高度大于三行高度，显示展开按钮
            hasMore.value = rect.height > maxHeight;
            // 检测完后恢复到收起状态
            isExpanded.value = false;
          })
          .exec();
      });
    });
  });

  // 切换展开/收起状态
  const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
  };
</script>

<style>

</style>
